<template>
	<view class="p-top30" :style="{'--color':color}">
		<status-bar :title="`添加${title}收款码`"></status-bar>
		<view class="viewbox auto">
			<view class="list bot">
				<text class="title">{{title}}昵称</text>
				<input type="text" class="flex-1 height color_33 size26" 
				     :placeholder="`输入${title}昵称`" v-model="bankName" placeholder-class="play"/>
			</view>
			<view class="list bot">
				<text class="title">真实姓名</text>
				<input type="text" class="flex-1 height color_33 size26"
				     v-model="userName"
				     placeholder="输入真实姓名" placeholder-class="play"/>
			</view>
			
			<view class="list bot">
				<text class="title">联系电话</text>
				<input type="number" class="flex-1 height color_33 size26" 
				 v-model="phone"
				placeholder="点击输入联系电话" placeholder-class="play"/>
			</view>
		</view>
		
		
		<view class="uploads" @click="Uploads">
			<image :src="$imgUrls(account_img)" mode="aspectFill" class="shoumg" v-if="account_img"></image>
			<view class="d-flex f-column a-center" v-else>
				<view class="iconfont icon-tianjia size70 color_99"></view>
				<text class="color_33 size26 m-top30">上传{{title}}收款码截图</text>
			</view>
			
		</view>
		
		<view class="viewboxs auto d-flex j-sa a-center m-top50">
			  <view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
			  <view class="btns flexac config size26 white" @click="addAccount">添加</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				cash_method:'',
				bankName:'',
				userName:'',
				phone:'',
				account_img:'',
			}
		},
		onLoad(opt) {
			if(opt.cash_method) this.cash_method = opt.cash_method;
		},
		methods: {
			addAccount(){
				if(!this.bankName) return this.$Toast('请输入昵称');
				if(!this.userName) return this.$Toast('请输入真实姓名');
				if(!this.phone) return this.$Toast('请输入联系电话');
				if(!this.account_img) return this.$Toast(`请上传${this.title}收款码`);
				this.$http.post({
					url:'/BrokerApi/addBankcard',
					data:{
						cash_method:this.cash_method,
						bankName:this.bankName,
						userName:this.userName,
						phone:this.phone,
						account_img:this.account_img,
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					this.$Toast(res.msg,2)
				})
			},
			
			async Uploads(){
				const imgs = await this.$common.chooseImage(1);
				if(!imgs.length) return;
				this.account_img = imgs[0];
			}
		},
		computed:{
			...mapState(['color']),
			title(){
				if(this.cash_method == 4) return '微信';
				if(this.cash_method == 5) return '支付宝';
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		width:100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		width:180rpx;
		color:#333;
		font-size:26rpx;
		
	}
	::v-deep.play{
		color:#999;
	}
	.btns{
		width: 258rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}
	.config{
		background-color: var(--color);
	}
	.uploads{
		width:400rpx;
		height: 500rpx;
		margin:40rpx auto;
		border: 1rpx solid #E4E4E4;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shoumg{
		width:100%;
		height: 100%;
	}
	.btns{
		width: 258rpx;
		height: 76rpx;
		border-radius: 38rpx;
	}
	
	
</style>
